<script lang="ts" setup>
import { useRouter } from '@/router';
import { onMounted, ref } from 'vue';
import AptSafeArea from '../../components/apt-safe-area/apt-safe-area.vue';
import { useCarCheckoutStore } from '@/store/carcheckout';
import { createPreOrder, getServiceList } from '@/api/car';
import { useLocale } from '@/locale/locale';
import AptCarListTips from '../../components/apt-car-list-tips/apt-car-list-tips.vue';
import { isWechat } from '@/utils/platform';

const { t } = useLocale();
const router = useRouter();
const statusBarH = ref(0);
const carCheckoutStore = useCarCheckoutStore();
const crsList = ref<any[]>([]);
const innnList = ref<any[]>([]);
const chooseType = ref('CRS');
const carListTipsRef = ref();
const carPackageTipsRef = ref();
const chooseBookDate = ref();

async function getList() {
  const payload: any = {
    serviceType: carCheckoutStore.serviceType,
    startAddressId:
      carCheckoutStore.serviceType == 'PICKUP'
        ? carCheckoutStore.airportInfo.id
        : carCheckoutStore.hotelInfo.id,
    endAddressId:
      carCheckoutStore.serviceType == 'PICKUP'
        ? carCheckoutStore.hotelInfo.id
        : carCheckoutStore.airportInfo.id,
    bookDate: carCheckoutStore.bookDate,
    bookTime: carCheckoutStore.bookTime,
    adultNum: carCheckoutStore.adultNumber,
    childNum: carCheckoutStore.childrenNumber
  };
  const res = await getServiceList(payload);
  if (res.code == 0) {
    crsList.value = res.data.list;
    innnList.value = res.data.innnList;
  }
}

function handleOpenCarListTips(type: string) {
  chooseType.value = type;
  carListTipsRef.value.open();
}

function handleOpenCarPackageTips() {
  carPackageTipsRef.value.open();
}

async function handleBookNow(item: any, orderType: string) {
  const payload: any = {
    orderType: orderType,
    serviceType: carCheckoutStore.serviceType,
    startAddressId:
      carCheckoutStore.serviceType == 'PICKUP'
        ? carCheckoutStore.airportInfo.id
        : carCheckoutStore.hotelInfo.id,
    endAddressId:
      carCheckoutStore.serviceType == 'PICKUP'
        ? carCheckoutStore.hotelInfo.id
        : carCheckoutStore.airportInfo.id,
    serviceId: orderType == 'CRS' ? item.service_id : item.id,
    bookDate: carCheckoutStore.bookDate,
    bookTime: carCheckoutStore.bookTime,
    adultNum: carCheckoutStore.adultNumber,
    childNum: carCheckoutStore.childrenNumber
  };
  const res = await createPreOrder(payload);
  if (res.code == 0) {
    uni.navigateTo({
      url: '/pages/car/submit?preOrderSn=' + res.data.preOrderSn
    });
  } else {
    uni.showToast({
      title: res.message,
      icon: 'none'
    });
    return;
  }
}

onMounted(async () => {
  uni.getSystemInfo({
    success: (res) => {
      statusBarH.value = res.statusBarHeight || 0;
    }
  });

  const dateFormatArr = {
    zh: 'zh-CN',
    en: 'en-US',
    ja: 'ja-JP',
    ko: 'ko-KR',
    zh_CN: 'zh-TW'
  };

  const date = new Date(carCheckoutStore.bookDate);
  const customFormatter = new Intl.DateTimeFormat('zh-CN', { month: 'long', day: 'numeric' });
  chooseBookDate.value = customFormatter.format(date);

  await getList();
});
</script>

<template>
  <uni-nav-bar
    v-if="isWechat()"
    :border="false"
    :title="t('TransferVehicleModel')"
    fixed
    left-icon="left"
    status-bar
    @click-left="router.back"
  />
  <view class="car-list-contain">
    <view :style="{ top: 'calc(44px + ' + statusBarH + 'px)' }" class="car-list-contain-top">
      <view class="car-list-contain-top-item">
        <view class="car-list-contain-top-item-top">
          <image
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_start.png"
          />
          <view>
            {{
              carCheckoutStore.serviceType == 'PICKUP'
                ? carCheckoutStore.airportInfo.showname
                : carCheckoutStore.hotelInfo.showname
            }}
          </view>
        </view>
        <view class="car-list-contain-top-item-bottom">
          {{
            t('TransferCarTimeInfo', {
              date: chooseBookDate,
              time: carCheckoutStore.bookTime
            })
          }}
        </view>
        <view class="car-list-contain-top-item-line"></view>
      </view>
      <view class="car-list-contain-top-item">
        <view class="car-list-contain-top-item-top">
          <image
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_end.png"
          />
          <view>
            {{
              carCheckoutStore.serviceType == 'PICKUP'
                ? carCheckoutStore.hotelInfo.showname
                : carCheckoutStore.airportInfo.showname
            }}
          </view>
        </view>
        <view class="car-list-contain-top-item-bottom">
          {{
            carCheckoutStore.serviceType == 'PICKUP'
              ? carCheckoutStore.hotelInfo.address
              : carCheckoutStore.airportInfo.address
          }}
        </view>
      </view>
    </view>
    <view v-if="crsList.length <= 0 && innnList.length <= 0" class="car-list-contain-empty">
      <image
        src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_empty.png"
      />
      <view>{{ t('TransferNoCar') }}</view>
    </view>
    <view v-else class="car-list-contain-service">
      <view v-if="crsList.length > 0" class="car-list-contain-service-crs">
        <view class="car-list-contain-service-crs-top" @click="handleOpenCarListTips('CRS')">
          <view class="car-list-contain-service-crs-top-l">
            <view class="car-list-contain-service-crs-top-l-bg">
              <view>{{ t('TransferHouseSelf') }}</view>
            </view>
            <view class="car-list-contain-service-crs-top-l-txt">{{ t('TransferSelfOwned') }}</view>
          </view>
          <image
            class="car-list-contain-service-crs-top-r"
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_arrow_right.png"
          />
        </view>

        <view
          v-for="(item, index) in crsList"
          :key="index"
          class="car-list-contain-service-crs-list"
        >
          <image
            :src="
              item.image
                ? item.image
                : 'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_noimage.png'
            "
            class="car-list-contain-service-crs-list-l"
          />
          <view class="car-list-contain-service-crs-list-r">
            <view class="car-list-contain-service-crs-list-r-title">{{ item.car_type_name }}</view>
            <view class="car-list-contain-service-crs-list-r-sub">{{ item.car_type_desc }}</view>
            <view class="car-list-contain-service-crs-list-r-info">
              <image
                src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_people.png"
              />
              <text class="t1">
                {{ t('TransfeCarPassengerNum', { number: item.passenger_num }) }}
              </text>
              <image
                src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_package.png"
              />
              <text class="t2">
                {{ t('TransfeCarPackageNum', { number: item.max_package_num }) }}
              </text>
              <image
                src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_tips.png"
                @click="handleOpenCarPackageTips"
              />
            </view>
            <view class="car-list-contain-service-crs-list-r-bottom">
              <view>
                {{ t('TransferPerVehicle', { money: parseFloat(item.price) + 'JPY' }) }}
              </view>
              <view @click="handleBookNow(item, 'CRS')">{{ t('TransferBookNow') }}</view>
            </view>
          </view>
        </view>
      </view>

      <view v-if="innnList.length > 0" class="car-list-contain-service-crs">
        <view class="car-list-contain-service-crs-top innn" @click="handleOpenCarListTips('INNN')">
          <view class="car-list-contain-service-crs-top-l">
            <view class="car-list-contain-service-crs-top-l-bg innn">
              <view>{{ t('TransferCarInnnTitle') }}</view>
            </view>
            <view class="car-list-contain-service-crs-top-l-txt innn">
              {{ t('TransferCarInnnMsg') }}
            </view>
          </view>
          <image
            class="car-list-contain-service-crs-top-r"
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_arrow_right.png"
          />
        </view>

        <view
          v-for="(item, index) in innnList"
          :key="index"
          class="car-list-contain-service-crs-list"
        >
          <image
            class="car-list-contain-service-crs-list-l"
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_noimage.png"
          />
          <view class="car-list-contain-service-crs-list-r">
            <view class="car-list-contain-service-crs-list-r-title">
              {{ t('TransfrInnnCarName') }}
            </view>
            <view class="car-list-contain-service-crs-list-r-sub">
              {{ t('TransferCarInnnPackageMsg') }}
            </view>
            <view class="car-list-contain-service-crs-list-r-info">
              <image
                src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_package.png"
              />
              <text class="t2">
                {{ t('TransferCarInnnPackageNum', { number: item.free_package_num }) }}
              </text>
              <image
                src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_tips.png"
                @click="handleOpenCarPackageTips"
              />
            </view>
            <view class="car-list-contain-service-crs-list-r-bottom">
              <view>
                {{ t('TransferPerVehicle', { money: item.price + 'JPY' }) }}
              </view>
              <view @click="handleBookNow(item, 'INNN')">{{ t('TransferBookNow') }}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="car-list-contain-service-nomore">{{ t('DiningNoMoreAvailable') }}</view>
    </view>
  </view>

  <apt-car-list-tips ref="carListTipsRef" :type="chooseType" />
  <apt-car-package-tips ref="carPackageTipsRef" />
  <apt-safe-area></apt-safe-area>
</template>

<style lang="scss" scoped>
.car-list-contain {
  &-top {
    position: fixed;
    left: 0;
    right: 0;
    background: #ffffff;
    padding: 28rpx 32rpx;

    &-item {
      position: relative;
      padding-bottom: 32rpx;

      &:last-child {
        padding-bottom: 0;
      }

      &-top {
        display: flex;
        align-items: flex-start;

        image {
          display: block;
          width: 32rpx;
          height: 32rpx;
          margin-right: 12rpx;
          position: relative;
          margin-top: 4rpx;
          z-index: 1;
        }

        view {
          flex: 1;
          line-height: 40rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #3d3d3d;
        }
      }

      &-bottom {
        padding-left: 44rpx;
        font-weight: 400;
        font-size: 22rpx;
        color: #8c8c8c;
        line-height: 30rpx;
        height: 30rpx;
        margin-top: 4rpx;
      }

      &-line {
        position: absolute;
        top: 36rpx;
        left: 15rpx;
        bottom: -10rpx;
        width: 2rpx;
        background: #e7e7e7;
      }
    }
  }

  &-service {
    padding-top: 236rpx;

    &-crs {
      margin-top: 20rpx;

      &-top {
        border-top-left-radius: 20rpx;
        border-top-right-radius: 20rpx;
        background: #fee1e3;
        display: flex;
        align-items: center;
        justify-content: space-between;

        &.innn {
          background: #ffede5;
        }

        &-l {
          display: flex;
          align-items: center;

          &-bg {
            background: url('https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_crs_bg.png')
              no-repeat 0 0 / 100% 100%;
            width: 212rpx;
            height: 64rpx;

            &.innn {
              width: 260rpx;
              background: url('https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_innn_bg.png')
                no-repeat 0 0 / 100% 100%;
            }

            view {
              line-height: 64rpx;
              padding-left: 20rpx;
              font-weight: 600;
              font-size: 28rpx;
              color: #ffffff;
              display: flex;
              align-items: center;

              image {
                display: block;
                width: 96rpx;
                height: 26rpx;
                margin-right: 4rpx;
              }
            }
          }

          &-txt {
            margin-left: 12rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #ff644d;
            line-height: 34rpx;
            width: 480rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            &.innn {
              width: 410rpx;
              margin-left: 0;
              color: #fc8038;
            }
          }
        }

        &-r {
          margin-right: 24rpx;
          display: block;
          width: 20rpx;
          height: 20rpx;
        }
      }

      &-list {
        background: #ffffff;
        padding: 32rpx;
        margin-bottom: 20rpx;
        display: flex;

        &:last-child {
          margin-bottom: 0;
        }

        &-l {
          display: block;
          width: 180rpx;
          height: 120rpx;
        }

        &-r {
          margin-left: 60rpx;
          flex: 1;

          &-title {
            font-weight: 500;
            font-size: 32rpx;
            color: #3d3d3d;
            line-height: 44rpx;
          }

          &-sub {
            margin-top: 4rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #8c8c8c;
            line-height: 34rpx;
          }

          &-info {
            display: flex;
            align-items: center;
            margin-top: 20rpx;

            text {
              font-weight: 400;
              font-size: 24rpx;
              color: #707070;
              line-height: 34rpx;

              &.t1 {
                margin-left: 12rpx;
                margin-right: 20rpx;
              }

              &.t2 {
                margin-left: 12rpx;
                margin-right: 8rpx;
              }
            }

            image {
              display: block;
              width: 24rpx;
              height: 24rpx;
            }
          }

          &-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 26rpx;

            view {
              &:first-child {
                font-weight: 500;
                font-size: 32rpx;
                color: #51668f;
                line-height: 44rpx;

                text {
                  font-size: 20rpx;
                }
              }

              &:last-child {
                width: 136rpx;
                height: 50rpx;
                background: #ff5a60;
                border-radius: 8rpx;
                line-height: 50rpx;
                font-weight: 500;
                font-size: 24rpx;
                color: #ffffff;
                text-align: center;
              }
            }
          }
        }
      }
    }

    &-nomore {
      padding-top: 60rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #afafaf;
      line-height: 44rpx;
      text-align: center;
    }
  }

  &-empty {
    padding-top: 236rpx;

    image {
      display: block;
      width: 410rpx;
      height: 410rpx;
      margin: 74rpx auto 0;
    }

    view {
      font-weight: 400;
      font-size: 28rpx;
      color: #afafaf;
      line-height: 44rpx;
      text-align: center;
    }
  }
}
</style>
